<template>
  <div class="card-container">
    <el-splitter layout="vertical">
      <el-splitter-panel size="100px">
        <div class="panel">
          <LanguageSwitch />
        </div>
      </el-splitter-panel>

      <el-splitter-panel size="100px">
        <div class="panel">
          <ElText type="primary">{{ $t('themeSettings.themeShift') }}：</ElText> <ThemeSwitcher />
        </div>
      </el-splitter-panel>

      <el-splitter-panel size="100px">
        <div class="panel">
          <ElPaginationWrapper :total="100" />
        </div>
      </el-splitter-panel>

      <el-splitter-panel size="700px">
        <div class="panel">
          <TableDemo />
        </div>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
  .card-container {
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-evenly;
  }

  .panel {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
